<template>
    <div class="bg-white rounded-xl p-5 shadow-sm">
        <h3 class="text-lg font-semibold mb-4">案件类型分布</h3>
        <div class="h-64">
            <canvas ref="chartCanvas"></canvas>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { Chart, DoughnutController, ArcElement, Tooltip, Legend } from 'chart.js'

// 注册 Chart.js 组件
Chart.register(DoughnutController, ArcElement, Tooltip, Legend)

const chartCanvas = ref<HTMLCanvasElement | null>(null)
let chartInstance: Chart | null = null

onMounted(() => {
    if (chartCanvas.value) {
        const ctx = chartCanvas.value.getContext('2d')
        if (ctx) {
            chartInstance = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: ['服务质量争议', '合同纠纷', '产品质量争议', '退款争议', '其他'],
                    datasets: [{
                        data: [35, 25, 20, 15, 5],
                        backgroundColor: [
                            '#3B82F6', // 蓝色 - 服务质量争议
                            '#10B981', // 绿色 - 合同纠纷
                            '#F59E0B', // 黄色 - 产品质量争议
                            '#EF4444', // 红色 - 退款争议
                            '#6B7280'  // 灰色 - 其他
                        ],
                        borderWidth: 0,
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                boxWidth: 12,
                                padding: 15,
                                font: {
                                    size: 11
                                }
                            }
                        }
                    },
                    cutout: '70%'
                }
            })
        }
    }
})

onUnmounted(() => {
    if (chartInstance) {
        chartInstance.destroy()
    }
})
</script>
